<template>
  <div class="home">
    <!--头部小区选择-->
    <div class="head">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
    </div>
    <announ-cement />
    <!--轮播图-->
    <div class="swipe">
      <van-swipe :autoplay="3000" stop-propagation>
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image"  v-lazy="image" height="150" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--四大功能-->
    <div class="funtion">
      <van-grid>
        <van-grid-item  to="/Payment">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-wodezijin"></use>
          </svg><br>
          <div class="word">物业缴费</div>
        </van-grid-item>
        <van-grid-item  to="/Maintain">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-tools-"></use>
          </svg><br>
          <div class="word">报事报修</div>
        </van-grid-item>
        <van-grid-item  to="/Announce">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-tongzhi"></use>
          </svg><br>
          <div class="word">物业通知</div>
        </van-grid-item>
        <van-grid-item  to="/Clear">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-baojie"></use>
          </svg><br>
          <div class="word">家政服务</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!--服务电话-->
    <div class="phone">
      <van-row>
        <van-col  span="16" style="text-align: center;font-size:16px">海华苑第七栋服务中心<br>地址：广东省珠海市香洲区金凤路18号</van-col>
        <van-col span="2" offset="4"  @click="cellme">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-dianhua"></use>
          </svg>
        </van-col>
      </van-row>
    </div>
    <!-- 百度地图 -->
      <baidu-map class="bm-view" :center="{lng: 113.536005, lat: 22.353747}" :zoom="15" :scroll-wheel-zoom="true" @click="lookDetail()">
        <bm-marker :position="{lng: 113.536005, lat: 22.353747}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <bm-info-window title="北京师范大学珠海分校海华苑7栋" :position="{lng: 113.536005, lat: 22.353747}"   :show="showFlag" @close="infoWindowClose()" @open="infoWindowOpen()">
          </bm-info-window>
        </bm-marker>
      </baidu-map>
    <buttom-Tabbar />
  </div>
</template>

<script >
import Vue from 'vue'
import ButtomTabbar from '../../components/ButtomTabbar'
import Announcement from '../../components/Announcement'
import { DropdownMenu, DropdownItem, Lazyload, Swipe, SwipeItem, Grid, GridItem, Col, Row, Divider, Overlay, Toast, Panel } from 'vant'
Vue.use(DropdownMenu).use(DropdownItem).use(Lazyload).use(Swipe).use(SwipeItem).use(Grid).use(GridItem).use(Col).use(Row).use(Divider).use(Overlay).use(Toast).use(Panel)
export default {
  name: 'Home',
  components: {
    'announ-cement': Announcement,
    'buttom-Tabbar': ButtomTabbar
  },
  data () {
    return {
      value1: 0,
      option1: [
        { text: '海华苑第七栋A406', value: 0 }
      ],
      images: [
        require('@/assets/style/img/桌面保洁.jpg'),
        require('@/assets/style/img/桌面—社区.jpg'),
        require('@/assets/style/img/桌面—洗衣.jpg'),
        require('../../assets/style/img/桌面—篝火.jpg')
      ],
      showFlag: false,
      show: false
    }
  },
  methods: {
    cellme () {
      Toast.success('已复制号码')
    },
    // 关闭弹窗
    infoWindowClose () {
      this.showFlag = false
    },
    // 打开弹窗
    infoWindowOpen () {
      this.showFlag = true
    },
    lookDetail () {
      this.showFlag = true
    }
  }
}
</script>

<style scoped>
.my-swipe van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    background-color: #39a9ed;
}
.iconfont{
  font-size: 40px;
}
.word{
  font-size: 10px;
}
.phone{
  width: 100%;
  height: 80px;
  margin-top: 20px;
}
.funtion{
  margin-bottom: 10px;
}
.bm-view{
  height: 370px;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.block {
    width: 320px;
    height: 320px;
    background-color: #fff;
}
.icon {
    width: 3em;
    height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
